import React, { useRef, useEffect } from 'react';
import { observer, inject } from 'mobx-react';
import { Layout, Spin, Button } from 'antd';
import RichEditor, { RichEditorRef } from '@/components/editor/editor';
import AssistantTabs from './components/AssistantTabs';
import { StoreProps } from './store';
import styles from './style/document.module.css';
import WritingHistory from './components/WritingHistory';

const { Content } = Layout;

const Document: React.FC<StoreProps> = ({ documentStore, proofreadStore }) => {
  const editorRef = useRef<RichEditorRef>(null);
  const [historyVisible, setHistoryVisible] = React.useState(false);

  const handleEditorChange = (content: string) => {
    documentStore?.setContent(content);
  };

  useEffect(() => {
    if (!documentStore) {
      return;
    }
    documentStore.initAgentInfo();
  }, [documentStore]);

  useEffect(() => {
    if (editorRef.current) {
      documentStore?.setEditorRef(editorRef);
    }
  }, [editorRef, documentStore]);

  if (!documentStore) return null;

  const handleHistorySelect = (item) => {
    documentStore.sessionId = item.sessionId;
    documentStore.resetDocumentForm();
    documentStore.setContent(item.content || '');
    documentStore.setDocumentForm({
      id: item.id,
      title: item.title,
      keywords: item.keywords,
      desc: item.remark,
      docType: item.writingType || '',
      model: item.model,
    });
    setHistoryVisible(false);
  };

  return (
    <Layout className={styles['statHub-document-layout']}>
      <Content className={styles['statHub-document-content']}>
        <div className={styles['statHub-document-container']}>
          <div style={{ flex: 1 }}>
            <div className={styles['statHub-document-editor']}>
              <RichEditor
                ref={editorRef}
                value={documentStore.content}
                onChange={handleEditorChange}
                readOnly={documentStore.processing} // 当处理中时禁用编辑器
                onExport={documentStore.handleExport}
                onUpload={documentStore.handleUpload}
              />
            </div>
            <div className={styles['statHub-document-opt-bar']}>
              <Button onClick={() => setHistoryVisible(true)} disabled={documentStore.processing}>
                查看写作历史
              </Button>
              <Button onClick={() => documentStore.saveDocument()} disabled={documentStore.processing} type="primary">
                保存内容
              </Button>
              <WritingHistory
                visible={historyVisible}
                onClose={() => setHistoryVisible(false)}
                onSelect={handleHistorySelect}
              />
            </div>
          </div>
          <AssistantTabs />
        </div>

        {/* 显示遮罩层 */}
        {documentStore.processing && (
          <div className={styles['statHub-editor-mask']}>
            <div className={styles['statHub-editor-mask-content']}>
              <Spin size="large" />
              <div style={{ marginTop: 16 }}>
                {documentStore.processingInfo.text || '处理中...'}
              </div>
              <Button
                onClick={() => documentStore.cancelOperation()}
                style={{ marginTop: 24 }}
              >
                取消
              </Button>
            </div>
          </div>
        )}
      </Content>
    </Layout>
  );
};

export default inject('documentStore', 'proofreadStore')(observer(Document)); 